---
interface Props {
  title?: string;
}

const { title = "点击查看隐藏内容" } = Astro.props;
---

<div
  class="mt-4 mb-2 p-3 bg-black bg-opacity-60 backdrop-blur-sm rounded-lg max-w-xl w-full wiki-hidden_text_area"
>
  <span
    class="relative block w-full text-lg font-bold wiki-hidden_text_area__title"
    >{title}</span
  >
  <div class="overflow-hidden wiki-hidden_text_area__content">
    <div class="pt-4">
      <div class="h-[1px] bg-white bg-opacity-40 mb-4"></div>
      <slot />
    </div>
  </div>
</div>

<script>
  function bindEvent() {
    document.querySelectorAll(".wiki-hidden_text_area__title").forEach((v) => {
      v.addEventListener("click", (e) => {
        v.parentElement?.classList.toggle("show");
      });
    });
  }

  document.addEventListener("astro:page-load", () => {
    bindEvent();
  });
</script>

<style lang="scss">
  .wiki-hidden_text_area__title {
    cursor: pointer;
    &::before {
      content: " ";
      position: absolute;
      top: 40%;
      right: 0.3rem;
      border: 5px solid transparent;
      border-left: 5px solid #fff;
      transform: translate(-25%, -25%) rotate(180deg);
      transition: transform 0.3s;
    }
  }

  .wiki-hidden_text_area__content {
    max-height: 0;
    transition: max-height 0.5s;
  }

  .wiki-hidden_text_area.show {
    .wiki-hidden_text_area__title {
      &::before {
        transform: rotate(90deg);
      }
    }

    .wiki-hidden_text_area__content {
      max-height: 800px;
    }
  }
</style>
